<template>
<div>
  <div class="tabNav">
    <router-link to="/index">
        <img src="../assets/img/sidebar1.png" />首页
    </router-link>
    <b class="colors">/<router-link to="/personManage">
        <img src="../assets/img/sidebar5.png" />个体户列表
    </router-link></b>/
    <b>个体户详情</b>
  </div>
    <el-row :gutter="24">
        <el-col :span="24">
            <el-card class="cardTits cardTitss cardTitdd personManageDel" shadow="hover">
                <p>个体户信息</p>
                <div class="modifyPassword">
                      <div class="details-table">
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">企业名称</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{tableData.selfBusinessName}}</div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">企业类型</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{$store.state.companyType[tableData.selfBusinessType]}}</div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">姓名</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{tableData.legalName}}</div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">手机号</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{tableData.legalPhone}}</div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">银行名称</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{tableData.bankName}}</div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">银行卡号</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{tableData.bankNo}}</div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">统一社会信用代码</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{tableData.socialCreditCode}}</div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">行业</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{$store.state.industry[tableData.industyCode]}}</div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">平台注册时间</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{ format('yyyy-MM-dd hh:mm:ss', new Date(tableData.createTime)) }}</div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">个体商户注册日期</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{format('yyyy-MM-dd', new Date(tableData.openTime))}}</div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">身份证正面照片</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <el-image
                                style="width: 160px; height: 80px"
                                :src="tableData.idCardFrondUrl"
                                :preview-src-list="[tableData.idCardFrondUrl]">
                              </el-image>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">身份证反面照片</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <el-image
                                style="width: 160px; height: 80px"
                                :src="tableData.idCardBackUrl"
                                :preview-src-list="[tableData.idCardBackUrl]">
                              </el-image>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">营业执照</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <el-image
                                style="width: 160px; height: 80px"
                                :src="tableData.licenseUrl"
                                :preview-src-list="[tableData.licenseUrl]">
                              </el-image>
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title img-height">意愿认证视频</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content img-height">
                              <!-- <el-image
                                style="width: 160px; height: 80px"
                                :src="tableData.wishVideoUrl"
                                :preview-src-list="[tableData.wishVideoUrl]">
                              </el-image> -->
                              <span v-if="tableData.wishVideoUrl == ''">-</span>
                              <el-link v-else type="primary" href="javascript:void(0)" @click="openVideo(tableData.wishVideoUrl)">查看意愿视频</el-link>
                              <!-- <span v-if="tableData.wishVideoUrl == ''">-</span>
                              <video v-else :src="tableData.wishVideoUrl" width="160" height="80" controls>
                              </video> -->
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">审核附件</div>
                          </el-col>
                          <el-col :span="8">
                            <!-- <div v-if="tableData.idCardFrondUrl != null" class="box-col col-content">
                              <el-link type="primary" href="javascript:void(0)" @click="openUrl(tableData.idCardFrondUrl)">查看附件</el-link>
                            </div> -->
                             <div class="box-col col-content">
                              -
                            </div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">平台协议书</div>
                          </el-col>
                          <el-col :span="8">
                            <div v-if="tableData.platformUrl != null" class="box-col col-content">
                              <el-link type="primary" href="javascript:void(0)" @click="openUrl(tableData.platformUrl)">查看平台协议书</el-link>
                            </div>
                            <div v-else class="box-col col-content">
                              -
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="4">
                            <div class="box-col col-title">身份证号</div>
                          </el-col>
                          <el-col :span="8">
                            <div class="box-col col-content">{{tableData.legalIdcard}}</div>
                          </el-col>
                          <el-col :span="4">
                            <div class="box-col col-title">授权委托书</div>
                          </el-col>
                          <el-col :span="8">
                            <div v-if="tableData.agreementUrl != null" class="box-col col-content">
                              <el-link type="primary" href="javascript:void(0)" @click="openUrl(tableData.agreementUrl)">查看授权委托书</el-link>
                            </div>
                            <div v-else class="box-col col-content">
                              -
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                      </div>
                  <template #footer>
                  <span class="dialog-footer">
                      <el-button @click="businessListShow = false">取 消</el-button>
                      <el-button type="primary" @click="businessListShow = false">确 定</el-button>
                  </span>
                  </template>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="24">
        <el-col :span="24">
            <el-card class="cardTits cardTitss cardTitdd personManageDel" shadow="hover">
                <p>任务信息</p>
                <el-table
                :data="taskList"
                stripe
                style="width: 100%"
                @selectionChange="downloadWhether"
                ref="multipleTable"
                >
                <el-table-column prop="id" align="center" label="任务ID" width="60"> </el-table-column>
                <el-table-column prop="businessName" align="center" label="企业名称">
                </el-table-column>
                <el-table-column prop="name" align="center" label="任务名称">
                </el-table-column>
                <el-table-column prop="taskPayment" align="center" label="预计服务费">
                </el-table-column>
                <el-table-column prop="sevicerNum" align="center" label="发放人数" width="80">
                </el-table-column>
                <el-table-column prop="sevicerNum" align="center" label="领取人数" width="80">
                </el-table-column>
                <el-table-column prop="sevicerNum" align="center" label="任务开始时间" width="160">
                  <template #default="item">
                    {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
                    </template>
                </el-table-column>
                <el-table-column prop="endDate" align="center" label="任务结束时间" width="160">
                  <template #default="item">
                    {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" align="center" label="任务创建时间" width="160">
                  <template #default="item">
                    {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
                    </template>
                </el-table-column>
                <el-table-column prop="taskStatus" align="center" label="状态">
                    <template #default="item">
                     {{ taskStatus[item.row.taskStatus] }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="caozuo"
                    label="操作"
                    width="70"
                    class-name="editor"
                >
                    <router-link to="/taskManage">
                        <el-button type="text">详情</el-button>
                    </router-link>
                </el-table-column>
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="arrPage"
                :page-size="selectPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
                </el-pagination>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="24">
        <el-col :span="24">
            <el-card class="cardTits cardTitss cardTitdd personManageDel" shadow="hover">
                <p>发票信息</p>
                <transition name="el-zoom-in-top">
                  <div
                    class="download"
                    v-show="checkboxSelect > 0"
                    style="margin-top: 0"
                  >
                    <i class="el-icon-info"></i>
                    共{{ total }}项，已选择<b>{{ checkboxSelect }}</b
                    >项
                    <span @click="invoiceDownload">下载</span>
                    <em @click="cleanSelection">清空</em>
                  </div>
                </transition>
                <el-table
                :data="selfBusiness"
                stripe
                style="width: 100%"
                @selectionChange="downloadWhether"
                ref="multipleTable"
                >
                <el-table-column type="selection" width="45"> </el-table-column>
                <el-table-column prop="billedBody" align="center" label="开票主体"> </el-table-column>
                <el-table-column
                    prop="billType"
                    align="center"
                    label="发票类型"
                >
                <template #default="item">
                      {{ billType[item.row.billType] }}
                    </template>
                </el-table-column>
                <el-table-column prop="billAmount" align="center" label="开票金额">
                </el-table-column>
                <el-table-column prop="taskNumber" align="center" label="关联任务数量" width="120">
                </el-table-column>
                <el-table-column prop="createTime" align="center" label="创建时间" width="180">
                  <template #default="item">
                    <template v-if="item.row.createTime != null">{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}</template>
                    <template v-else>--</template>
                  </template>
                </el-table-column>
                <el-table-column prop="isUploadBill" align="center" label="是否上传发票">
                    <template #default="item">
                      <template v-if="item.row.isUploadBill != null">{{ isUploadBill[item.row.isUploadBill] }}</template>
                      <template v-else>--</template>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="caozuo"
                    label="操作"
                    width="70"
                    class-name="editor"
                >
                    <template #default="item">
                      <template v-if="item.row.billUrl == null">--</template>
                      <el-button v-else type="text" @click="openUrl(item.row.billUrl)">查看</el-button>
                      </template>
                </el-table-column>
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="arrPage"
                :page-size="selectPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
                </el-pagination>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="24">
        <el-col :span="24">
            <el-card class="cardTits cardTitss cardTitdd personManageDel" shadow="hover">
                <p>关注企业列表</p>
                <el-table :data="weiguanzhu" ref="multipleTable" stripe style="width: 100%">
                  <el-table-column prop="name" label="企业名称">
                  </el-table-column>
                  <el-table-column prop="socialCreditCode" label="统一社会信用代码">
                  </el-table-column>
                  <el-table-column prop="attentionTime" label="关注时间">
                    <template #default="item">
                      {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.attentionTime)) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="examineStatus" label="审核状态">
                    <template #default="item">
                      {{item.row.examineStatus == 0 ? "待审核" : "已关注"}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="examineTime" label="审核时间">
                    <template #default="item">
                      <span v-if="item.row.examineTime == null || item.row.examineTime == ''">-</span>
                      <span v-else>{{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.examineTime)) }}</span>
                    </template>
                  </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
</div>  
</template>
<script>
export default {
  data() {
    return {
      weiguanzhu: [],
      billType: {
        1: "专项增值税发票",
        2: "普通增值税发票",
      },
      isUploadBill: {
        0: "未上传",
        1: "已上传",
      },
      taskStatus: {
        0: "发布中",
        1: "进行中",
        2: "已结束",
      },
      selfBusinessType: {
        0: "其他",
        1: "个体工商户",
        2: "有限责任公司",
        3: "股份有限公司",
        4: "合伙企业",
        5: "个人独资企业",
      },
      value: '',
      tableData: [],
      taskList: [],
      selfBusiness: [],
      checkboxSelect: 0,
      currentPage: 1,
      total: 0, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
			dwonloadList: [] // 选中的数据
    };
  },
  created() {
    this.getTableData();
    this.getTaskList();
    this.againAgreementAlerts();
    this.selectInvoiceInfoBySelfId();
  },
  methods: {
    getTableData() {
      // 获取详情信息
      this.$http({
        url: "/api/quick/oem/selfBusiness/getSelfInfo?businessId=" + this.$route.query.id,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result;
        }
      });
    },
    getTaskList() {
      // 获取任务列表信息
      this.$http({
        url: "/api/quick/oem/task/getTaskList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          isDisable: 0,
          taskStatus: 0,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
        },
      }).then((data) => {
        if (data.code === 0) {
          this.taskList = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    selectInvoiceInfoBySelfId() {
      // 个体工商户信息页面-详情-发票信息
      this.$http({
        url: "/api/quick/oem/selfBusiness/selectInvoiceInfoBySelfId",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          selfBusinessId: this.$route.query.id,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
        },
      }).then((data) => {
        if (data.code === 0) {
          this.selfBusiness = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    handleSizeChange(val) {
      // 切换每页条数调用
      this.selectPage = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      // 切换当前页数调用
      this.currentPage = val;
      this.getTableData();
    },
    handleSelectionChange() {},
    downloadWhether(d) {
      this.checkboxSelect = d.length;
      this.billdwonload = d;
    },
    cleanSelection() {
      // 清空选择
      this.$refs.multipleTable.clearSelection();
    },
    againAgreementAlerts() {
      // 关注企业列表
      this.$http({
        url: "/api/quick/server/consumer/followList",
        method: "post",
        headers: {
          "businessId": this.$route.query.id,
          "Content-Type": "application/json",
        }
      }).then((data) => {
        if (data.code == 0) {
          this.weiguanzhu = data.result
        }
      });
    },
    openVideo(url) {
      // 查看视频
      this.$alert('<video width="400" controls height="300" src="' + url +'"></video>', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        center: true,
        customClass: "seeVideo"
      })
    },
    openUrl(url) {
      // 打开新窗口查看pdf
      if(url === '' || url === null || url === undefined) return
      let str = url.substring(0, url.indexOf('?'))
      let suffix = str.substring(str.lastIndexOf('.'), url.length)
      if(suffix === '.PDF' || suffix === '.pdf') {
        this.$http({
          url: "/api/quick/server/consumer/pdfPreView",
          method: "post",
          params: {
            ossPath: url
          },
          responseType: 'blob'
        }).then((data) => {
          const blob = new Blob([data]);
          const href = window.URL.createObjectURL(blob)
          window.open('/pdfjs/web/viewer.html?file=' + encodeURIComponent(href))
        });
      }else {
        let newwin = window.open();
        newwin.document.write("<img src=" + url + " />");
      }
    },
  },
};
</script>
<style scoped>
</style>
